<template>
	<div class="hello_refund">
		<div class="refund_title clearfix">
			<span @click="goBack" class="left">返回</span>
			<div>退款</div>
		</div>
		<div class="refund_reason clearfix">
			<span>退款原因</span>
			<select  class="right">
				<option>请选择</option>
				<option>时间不合适</option>
				<option>多拍住宿</option>
				<option>多拍餐饮</option>
				<option>其他(选择其他，需要手动输入原因)</option>
			</select>
		</div>
		<div class="refund_say">
			<label for="">退款说明：</label>
			<input type="text" placeholder="选填"/>
		</div>
		<div class="refund_item">
			<p>退款类型</p>
			<div class="clearfix">
				<input type="checkbox" />
				<span>报名费(全部)</span>
				<span class="right">￥200.00</span>
			</div>
			<div class="stay_total">
				<div>
					<input type="checkbox" />
					<span>住宿</span>
					<span class="right">￥2000.00/2间</span>
				</div>
				<div class="order_hotel " v-if="show">
					<input type="checkbox" />
					<span>一档酒店/3天</span>
					<span class="right">￥1000.00</span>
				</div>
				<div class="order_hotel " v-if="show">
					<input type="checkbox" />
					<span>一档酒店/3天</span>
					<span class="right">￥1000.00</span>
				</div>
			</div>
			<div class="food">
				<div>
					<input type="checkbox" />
					<span>餐饮</span>
					<span class="right">￥60.00/2份</span>
				</div>
				<div class="order_hotel " v-if="show">
					<input type="checkbox" />
					<span>午餐</span>
					<span class="right">￥30.00</span>
				</div>
				<div class="order_hotel " v-if="show">
					<input type="checkbox" />
					<span>午餐</span>
					<span class="right">￥30.00</span>
				</div>
			</div>		
		</div>
		<div class="order_notice">注：选择报名费将默认全部退款，将不可参加本次比赛</div>
		<div class="foot clearfix">
			<div class="left">共计：<span>￥2400.00</span></div>
			<button class="right" @click="goSureRefund">确认退款</button>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				selected:''
			}
		},
		methods:{
			goBack:function(){
				this.$router.push({path:'/orderdetail'})
			},
			goSureRefund:function(){
//				confirm('是否确定要退款?').then(action => {
//					alert("取消成功！")
//				});
				if(confirm("是否确定要退款?")){
					console.log(222)
				}else{
					console.log(333)
				}
			}
		}
	}
</script>

<style>
	html,body{
		font-size: 0.3rem;
		margin: 0;
		padding: 0;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}

.refund_title{
	background: #4682B4;
	font-size: 0.4rem;
	color: #fff;
	padding: 20px 0 20px 10px;
	
}
.refund_title>div{
	text-align: center;
}
.refund_reason,.refund_say{
	padding: 10px;
}
.refund_reason>select{
	text-align: right;
}
.refund_item{
	border-bottom: 1px solid #ccc;
	padding: 10px;
}
.refund_say>input{
	padding: 10px ;
	border: none;
}
input[type="checkbox"]{
	width:20px;
	height: 20px;
}
.order_hotel{
	padding:10px 10px 10px 40px;
}
.order_notice{
	font-size: 0.2rem;
	padding: 10px;
	background: #f2f2f2;
}
.hello_refund .foot{
	position: fixed;
	bottom: 0px;
	width: 100%;
	padding-left: 10px;
}
.foot>div{
	line-height: 44px;
}
.foot>div>span{
	color: red;
}
.foot >button{
	padding: 15px 25%;
	background: #00BFFF;
	border: 1px solid #00BFFF;
	color: #fff;
	font-weight: 600;
	border-radius: 5px;
}

</style>